<template>
   <div class="left-list-main">
     <ul class="list">
       <li class="title">技术成果</li>
       <li class="item" @click="tapListItem(index)" :class="{active:index===state.currentIndex}" v-for="(item,index) in list" :key="index">
         {{ item.name }}
       </li>
     </ul>
   </div>
</template>

<script setup>
import {reactive} from 'vue'
import {useRoute} from "vue-router";
const state=reactive({
  currentIndex:0
})
const emits=defineEmits(['change'])
const list = [
  {
    name: "全部",
    code:''
  },
  {
    name: "实用技术",
    code:'1'
  },
  {
    name: "优良品种",
    code:'2'
  },
  {
    name: "技术规程",
    code:'3'
  },
  {
    name: "论文著作",
    code:'4'
  },
  {
    name: "软著专利",
    code:'5'
  },
  {
    name: "科研奖励",
    code:'6'
  }

];
const route=useRoute()
onMounted(()=>{
  if(route.query.current){
    tapListItem(~~route.query.current)
  }else {
    tapListItem(0)
  }

})
const tapListItem=(index)=>{
  state.currentIndex=index
  emits('change',list[index])
}
</script>

<style scoped lang="scss">
.left-list-main{
  width: 200px;
  .list{
    background: #FFFFFF;
    height: 708px;
    padding: 0 10px;
    .title{
      padding: 15px 0 10px;
      font-size: 18px;
      font-weight: bold;
      color: $base-color;
      border-bottom: 1px solid #c4c7c7;
    }
    .item{
      cursor: pointer;
      padding: 10px 0;
      flex-direction: column;
      justify-content: center;
      border-bottom: 1px solid #f2f2f2;
      font-size: 16px;
      &.active{
        color: $base-color;
        transition: all 0.3s ease-in-out;
        transform: scale3d(1.01,1.02,1);
        font-weight: bold;
        &:before{
          content: '';
          display: inline-flex;
          width: 8px;
          margin-right: 5px;
          height: 8px;
          background: $base-color;
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
      }
      &:hover{
        color: $base-color;
        transition: all 0.3s ease-in-out;
        transform: scale3d(1.01,1.02,1);
        font-weight: bold;
        &:before{
          content: '';
          display: inline-flex;
          width: 8px;
          margin-right: 5px;
          height: 8px;
          background: $base-color;
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
      }
      &:last-child{
        border-bottom: 0px;
      }

    }
  }
}
</style>
